<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-12-13 12:27:50
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2022-12-13 13:02:09
 * @Description: 操作日志组件
 * @FilePath: \tuanfeng-admin-front\src\components\LogDialog.vue
-->
<script setup lang="ts">
import { ref, reactive, toRefs, watch, onMounted } from "vue";
import { getUserLogsAPI } from "../api/logs";

const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    path: {
        type: String,
        required: true,
    },
});

const { visible, path } = toRefs(props);
const emits = defineEmits(["update:visible", "confirm"]);

const list = ref([]);
const totalCount = ref(0);
const loading = ref(false);

let filters = reactive({
    pageNo: 1,
    pageSize: 10,
});

const query = () => {
    loading.value = true;
    getUserLogsAPI(filters, path.value).then((res) => {
        list.value = res.data;
        totalCount.value = res.totalCount;
        loading.value = false;
    });
};
onMounted(() => {
    console.log(path.value);
    query();
});

watch(filters, query);
</script>
<template>
    <el-dialog v-model="visible" title="操作日志" width="1000px" @close="$emit('update:visible', false)">
        <el-table v-loading="loading" :data="list">
            <el-table-column prop="id" label="id" width="60" />
            <el-table-column prop="content" label="内容" />
            <el-table-column prop="createBy" label="操作者" width="180" />
            <el-table-column prop="createDate" label="操作时间" width="200"/>
        </el-table>
        <el-pagination style="margin-top: 20px; justify-content: flex-end" background layout="total, sizes, prev, pager, next" :total="totalCount" :default-current-page="1" v-model:current-page="filters.pageNo" v-model:page-size="filters.pageSize"></el-pagination>
    </el-dialog>
</template>
<style scoped lang="less">
@import url("../assets/less/common.less");
@import url("../assets/less/search.less");
</style>
